<template>
  <div class="client-list-container">
    <div class="client-btn-container">
        <el-date-picker
          v-model="searchDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small">
        </el-date-picker>

        <div>
          <el-input v-model="keyword" placeholder="请输入关键字" style="width:400px" size="small"></el-input>
          <el-button type="primary" @click="getList" size="small">搜索</el-button>
          <el-button type="danger" v-show="userInfo.role==='admin'" @click="exportTable" size="small">导出</el-button>
          <el-button type="success" v-show="userInfo.role==='admin'" @click="printTable()" size="small">打印</el-button>
        </div>

    </div>
    <div class="client-list-type">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="已发起" name="0"></el-tab-pane>
        <el-tab-pane label="会诊中" name="1"></el-tab-pane>
        <el-tab-pane label="已完成" name="2"></el-tab-pane>
        <el-tab-pane label="被拒绝" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div id="printData" v-show="false">
      <table>
        <thead>
        <tr>
          <th>发起医生</th>
          <th>被邀请医生</th>
          <th>患者姓名</th>
          <th>性别</th>
          <th>联系电话</th>
          <th>主诉</th>
          <th>病历号</th>
          <th>会诊时间</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in dataList">
          <td>{{item.fromName}}</td>
          <td>{{item.toName}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.disease}}</td>
          <td>{{item.id}}</td>
          <td>{{item.consultationTime}}</td>
          <td>{{showState(item)}}</td>
        </tr>
        </tbody>
      </table>
    </div>
      <el-table
        v-loading="loading"
        :data="dataList"
        size="small"
        align="center"
        style="width: 100%;"
        height="100%">
        <el-table-column
          align="center"
          prop="fromName"
          label="发起医生"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="toName"
          label="被邀请医生"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="患者姓名"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="gender"
          label="性别">
        </el-table-column>
        <el-table-column
          align="center"
          prop="age"
          label="年龄"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          label="联系电话">
          <template slot-scope="scope">
            <span class="case-phone">
              {{scope.row.phone}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="disease"
          label="主诉">
        </el-table-column>
        <el-table-column
          align="center"
          label="病历号">
          <template slot-scope="scope">
            <span class="case-id" @click="handleCaseOpen(scope.row)">
              {{scope.row.id}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="consultationTime"
          label="会诊时间">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="stateTagType(scope.row.state)"
              size="mini">{{showState(scope.row)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-badge class="item" v-show="scope.row.state===1">
              <el-button v-show="userInfo.role==='doctor'" size="mini" type="primary" >
                <router-link to="/consultationOnline/index">进入会诊</router-link>
              </el-button>
            </el-badge>
            <el-badge class="item" v-show="scope.row.state===0 && scope.row.to===userInfo.id">
              <el-button v-show="userInfo.role==='doctor'" @click="agree(scope.row)" size="mini" type="primary" >
                同意
              </el-button>
            </el-badge>
            <el-badge class="item" v-show="scope.row.state===0 && scope.row.to===userInfo.id">
              <el-button v-show="userInfo.role==='doctor'" @click="reject(scope.row)" size="mini" type="danger" >
                拒绝
              </el-button>
            </el-badge>
            <el-badge  class="item" v-show="scope.row.state===2">
              <el-button  @click="handleCaseOpen1(scope.row)" size="mini" type="danger" >
                查看会诊意见
              </el-button>
            </el-badge>
          </template>
        </el-table-column>
      </el-table>
    <div class="client-list-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { consultationList, getResult, updateConsultation, exportConsult } from '@/api/doctor.js'
import { mapGetters } from 'vuex'
import { formatTimeMills } from '../../../../utils/myUtil'

export default {
  name: 'clientList',
  data() {
    return {
      searchDate: null,
      activeName: 'all',
      currentPage2: 1, // 分页 当前页数
      dataList: null,
      loading: true, // 表格加载 loading
      value: '1',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyword: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'ipAddress'])
  },
  created() {
    this.getList()
  },
  methods: {
    async exportTable() {
      location.href = this.ipAddress + '/consultation/export'
      // let startTime = null
      // let endTime = null
      // if (this.searchDate != null) {
      //   startTime = formatTimeMills(this.searchDate[0])
      //   endTime = formatTimeMills(this.searchDate[1])
      // }
      // const params = {
      //   id: this.userInfo.role === 'doctor' ? this.userInfo.id : null,
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize,
      //   keyword: this.keyword === '' ? null : this.keyword,
      //   state: this.activeName === 'all' ? null : this.activeName,
      //   startTime: startTime,
      //   endTime: endTime
      // }
      // await exportConsult(params)
    },
    printTable() {
      window.document.body.innerHTML = document.getElementById('printData').innerHTML // 把 html 里的数据 复制给 body 的 html 数据 ，相当于重置了整个页面的 内容
      window.print()
    },
    async handleCaseOpen1(item) {
      const res = await getResult({ id: item.id })
      this.$store.commit('TOGGLE_CASELAYER1', true)
      this.$store.commit('SET_CASEDETAIL1', res.data)
    },
    agree(item) {
      this.$confirm('是否同意该会诊请求？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await updateConsultation({ id: item.id, state: 1 })
        this.$message({
          type: 'success',
          message: res.data
        })
        this.getList()
      })
    },
    reject(item) {
      this.$confirm('是否拒绝该会诊请求？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await updateConsultation({ id: item.id, state: 3 })
        this.$message({
          type: 'success',
          message: res.data
        })
        this.getList()
      })
    },
    getList() {
      let startTime = null
      let endTime = null
      if (this.searchDate != null) {
        startTime = formatTimeMills(this.searchDate[0])
        endTime = formatTimeMills(this.searchDate[1])
      }
      this.loading = true
      const params = {
        id: this.userInfo.role === 'doctor' ? this.userInfo.id : null,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.keyword === '' ? null : this.keyword,
        state: this.activeName === 'all' ? null : this.activeName,
        startTime: startTime,
        endTime: endTime
      }
      consultationList(params).then((res) => {
        const data = res.data
        this.dataList = data.list
        this.pageNum = data.pageNum
        this.pageSize = data.pageSize
        this.total = data.total
        this.loading = false
      })
    },
    handleClick() {
      this.getList()
    },
    handleSizeChange(pageSize) { // pageSize 改变时会触发
      this.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) { // currentPage 改变时会触发
      this.pageNum = pageNum
      this.getList()
    },
    handleEdit(item) {
      this.$confirm('此操作将进入会诊房间, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('SET_CASEDETAIL', item)
        this.$router.push({ path: '/consultation' })
        this.$message({
          type: 'success',
          message: '进入会诊房间成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消进入该会诊'
        })
      })
    },
    async handleCaseOpen(item) {
      // 获取医生的姓名
      // const res1 = await getOneDoctor({ id: item.from })
      // item.fromName = res1.data.name
      // const res2 = await getOneDoctor({ id: item.to })
      // item.toName = res2.data.name
      this.$store.commit('TOGGLE_CASELAYER', true)
      this.$store.commit('SET_CASEDETAIL', item)
    },
    stateTagType(state) {
      switch (state) {
        case 0: return 'warning'
        case 1: return 'success'
        case 2: return 'warning'
        case 3: return 'danger'
      }
    },
    showState(item) {
      switch (item.state) {
        case 0:
          if (item.from === this.userInfo.id || this.userInfo.role === 'admin') { return '申请中' } else return '等待您的处理'
        case 1: return '正在会诊'
        case 2: return '已结束'
        case 3: if (item.from === this.userInfo.id || this.userInfo.role === 'admin') { return '会诊申请被拒' } else return '您已拒绝该次会诊'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.client-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  .client-btn-container {
    display: flex;
    justify-content: space-between;
  }
  .client-list-pagination{
    text-align: right;
    padding-top: 10px;
  }
  .case-id , .case-phone{
    padding: 5px;
    color: $linkColor;
    cursor: pointer;
  }
}
table,th,td
{
  border:1px solid black;
}
</style>
